<template>
  <div>
    <component-api class="mt0" :items="checkboxesProps" :descriptions="checkboxes.propsDescs" title="Props">
    </component-api>
    <component-api :items="checkboxes.slots" title="Slots"></component-api>
    <component-api :items="checkboxesEvents" title="Events"></component-api>
  </div>
</template>

<script>
  import WCheckboxes from "../../../../../src/components/checkboxes/WCheckboxes.vue";

  const checkboxes = {
    propsDescs: {
      items:
        "An array of checkbox items to display. Each item object should contain at least a <code>label</code> or a <code>value</code> attribute.",
      value:
        '<strong class="error"><code>model-value</code> in Vue 3.</strong><br>Provide an array of values to dictate the checked state of all the checkboxes.<br>This value gets updated when using a v-model.',
      labelOnLeft: "Moves the label to the left of each checkbox.",
      itemLabelKey:
        "The property name (aka key) in each item object where to find the label of the item (if any).",
      itemValueKey:
        "The property name (aka key) in each item object where to find the value of the item (if any).",
      itemColorKey:
        "The property name (aka key) in each item object where to find the color of the item (if any).",
      inline: "Displays all the checkboxes inline instead of in column.",
      round: "Displays round checkboxes instead of square ones.",
      color:
        'Applies a color to the active checkbox. Accepts all the color names of the color palette, status colors, or custom colors (learn more about the colors in the <a href="/colors">colors</a> knowledge base page).<br>Providing a color hex, rgb(a) or hsl(a) will not work.',
      name:
        "Provide a native HTML <code>name</code> attribute to the checkbox. If not provided, a unique common name will be computed and applied to all the checkboxes.",
      disabled:
        "Disables all the checkboxes making them unreactive to user interactions.",
      readonly:
        "The checkbox will still look like an interactive checkbox except that it is read-only: its current value cannot be changed by user interaction.",
      required:
        "Applies the native HTML <code>required</code> attribute to each checkbox.",
      validators:
        '<span class="deep-orange">Only for validation, when the <strong class="code">w-checkboxes</strong> component is wrapped into a <strong class="code">w-form</strong></span>.<br>An array of functions determining the validity of the checkbox. Each function will be executed on checkbox validation and should return true when valid, or a string containing an error message when invalid. When one of the validators fails, the returned error message will appear underneath the checkbox.',
    },
    slots: {
      item: {
        description: "Provide a custom content for each checkbox label.",
      },
    },
    events: {
      input: {
        description:
          "Emitted each time any of the checkboxes is toggled.<br>Updates the v-model value in Vue 2.x only.",
        params: {
          "[Array]":
            "Array of <code>return-value</code> of each checked checkbox.<br>The <code>return-value</code> is one of the following attributes, if they exist, in this order: the item value, the item label, the item index.",
        },
      },
      "update:modelValue": {
        description:
          "Emitted each time any of the checkboxes is toggled.<br>Updates the v-model value in Vue 3 only.",
        params: {
          "[Array]":
            "Array of <code>return-value</code> of each checked checkbox.<br>The <code>return-value</code> is one of the following attributes, if they exist, in this order: the item value, the item label, the item index.",
        },
      },
      focus: {
        description: "Emitted on each checkbox focus.",
        params: {
          "[DOM event object]": "The associated focus DOM event.",
        },
      },
    },
  };
  export default {
    data: () => ({
      checkboxes,
    }),

    computed: {
      // Reads all the props and events directly from the component, so that as soon as a new prop or event
      // is added it will appear even if no description is yet provided.
      checkboxesProps() {
        return WCheckboxes.props;
      },
      checkboxesEvents() {
        return WCheckboxes.emits.reduce(
          (obj, label) => (obj[label] = checkboxes.events[label] || {}) && obj,
          {}
        );
      },
    },
  };
</script>